<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script>
        function fn(a,b,c){
            // 取出两个列表的元素节点
            let currentChild = document.getElementById(a);
            let bChild = document.getElementById(b);
            let cChild = document.getElementById(c);

            // 事件发生时,有两种场景
            // 1.当前节点处于隐藏状态
            if(currentChild.style.display == "none"){
                // 此时需要将当前节点显示出来
                currentChild.style.display = "block";
                // 其他节点全部隐藏
                bChild.style.display = "none";
                cChild.style.display = "none";
                return;
            }
            // 2.当前节点处于显示状态
            // 那么此时其他节点一定是全部隐藏的
            // 因此,只需要将当前节点隐藏即可
            currentChild.style.display = "none";
        }
    </script>
</head>
<body>
<!--
    三个列表中最多只能展示出一个列表的选项
    当点击某一个列表中,如果原本列表是显示的,则直接隐藏起来
    如果原本列表是隐藏的,则显示该列表,隐藏其余列表
-->
<h2 onclick="fn('u1','u2','u3')">您最喜欢的动画片</h2>
<ul id="u1" style="display: none;">
    <li>奶龙</li>
    <li>萌鸡小队</li>
    <li>小猪佩奇</li>
</ul>
<h2 onclick="fn('u2','u1','u3')">您最喜欢的电影</h2>
<ul id="u2" style="display: block;">
    <li>哪吒之魔童降世</li>
    <li>熊出没之还我熊芯</li>
    <li>姜子牙</li>
</ul>
<h2 onclick="fn('u3','u1','u2')">您最喜欢的综艺节目</h2>
<ul id="u3" style="display: none;">
    <li>极限挑战</li>
    <li>奔跑吧</li>
    <li>向往的生活</li>
</ul>
</body>
</html>